<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { Punish, StudentInfo } from '@/types/StudentType.ts'
import { ElMessage } from 'element-plus'
import axios from 'axios'

// 趣味惩罚数据数组
const punishments = ref<Punish[]>()

// 修改类型定义：从 StudentInfo[]改为 Punish[]
const selectedPunishments = ref<Punish[]>([])


// 根据权重随机选择惩罚
function getRandomPunishmentByWeight(): Punish {
  // 计算所有权重之和
  //@ts-ignore
  const totalWeight = punishments.value.reduce(
    (sum, punishment) => sum + (punishment.punishWeight || 1),
    0,
  )

  // 生成一个随机数，范围是 0 到权重总和
  let random = Math.random() * totalWeight
  //@ts-ignore
  // 遍历惩罚列表，根据权重选择
  for (const punishment of punishments.value) {
    random -= punishment.punishWeight || 1
    if (random <= 0) {
      return punishment
    }
  }

  // 保底返回最后一个
  //@ts-ignore
  return punishments.value[punishments.value.length - 1]
}

// 用于显示的物品数组
const displayItems = ref<Punish[]>([])
const itemsContainer = ref<HTMLElement | null>(null)
const isRolling = ref(false)

// 生成显示用的物品列表
function generateDisplayItems() {
  const items: Punish[] = []
  // 生成50个物品，确保中间的是最终选中项
  for (let i = 0; i < 50; i++) {
    items.push(getRandomPunishmentByWeight())
  }
  return items
}

function scrollSelectPunishments() {
  //@ts-ignore
  if (punishments.value.length === 0 || isRolling.value) {
    ElMessage.warning('请等待当前抽取完成')
    return
  }

  isRolling.value = true
  const button = document.querySelector('.controls button') as HTMLButtonElement
  if (button) button.disabled = true

  // 生成最终选中的惩罚
  const finalPunishment = getRandomPunishmentByWeight()

  // 生成显示列表，确保中间位置是最终选中项
  const items = generateDisplayItems()
  const middleIndex = Math.floor(items.length / 2)
  items[middleIndex] = finalPunishment
  displayItems.value = items

  // 设置初始位置
  if (itemsContainer.value) {
    itemsContainer.value.style.transition = 'none'
    itemsContainer.value.style.transform = 'translateX(0px)'

    // 强制重绘
    void itemsContainer.value.offsetHeight

    // 开始动画
    itemsContainer.value.style.transition = 'all 5s cubic-bezier(0.15, 0.85, 0.35, 1)'
    itemsContainer.value.style.transform = `translateX(-${(middleIndex - 2) * 180 + 90}px)`
  }

  // 动画结束后
  setTimeout(() => {
    selectedPunishments.value = [finalPunishment]
    isRolling.value = false
    if (button) button.disabled = false
  }, 5000)
}

const searchValue = ref({
  pageSize: 10,
  current: 1,
  punishDescription: '',
})

const loadData = async () => {
  const res = await axios.post('/api/punish/list/page', searchValue.value)
  if (res.data.code === 0) {
    punishments.value = res.data.data.records
  } else {
    ElMessage.error('获取数据失败！')
  }
}

onMounted(() => {
  loadData()
})

// 获取惩罚项的颜色
function getItemColor(item: Punish): string {
  const weight = item.punishWeight
  if (weight >= 80 && weight <= 100) {
    return '#808080' // 灰色
  } else if (weight >= 60 && weight < 80) {
    return '#496FFB' // 蓝色
  } else if (weight >= 40 && weight < 60) {
    return '#D64DE7' // 紫色
  } else if (weight >= 20 && weight < 40) {
    return '#F7CE27' // 金色
  } else if (weight < 20) {
    return '#FF4444' // 红色
  }
  return '#FF4444' // 默认红色
}

// 获取惩罚项的类
function getItemClass(item: Punish): string {
  //@ts-ignore
  return {
    selected: item === selectedPunishments.value[0],
  }
}
</script>

<template>
    <div class="random-select">
      <h1>惩罚抽取</h1>
      <div class="csgo-container">
        <div class="selector"></div>
        <div class="items-container" ref="itemsContainer">
          <div
            v-for="(item, index) in displayItems"
            :key="index"
            class="item"
            :class="getItemClass(item)"
            :style="{
              borderBottom: '6px solid' + getItemColor(item),
            }"
          >
            <div class="itemInner" :style="{
              boxShadow: 'inset 0px -20px 10px -10px' + getItemColor(item),width:'100%',height:'100%',
            }">
              {{ item.punishDescription }}
            </div>
          </div>
        </div>
      </div>
      <div class="controls">
        <el-button type="primary" @click="scrollSelectPunishments" size="large">
          开始抽取
        </el-button>
      </div>
    </div>
</template>

<style scoped lang="scss">
.random-select {
  text-align: center;
  padding: 30px;
  margin-top: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  .csgo-container {
    position: relative;
    width: 1000px;
    height: 300px;
    margin: 20px auto;
    overflow: hidden;
    background: #eee;
    border-radius: 8px;
    display: flex;
    align-items: center;
    .selector {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: 4px;
      height: 100%;
      background: #ff4444;
      z-index: 2;
      box-shadow: 0 0 10px rgba(255, 68, 68, 0.8);
    }

    .items-container {
      display: flex;
      position: absolute;
      left: 50%;
      transform: translateX(0);
      will-change: transform;

      .item {
        flex-shrink: 0;
        width: 300px;
        height: 150px;
        margin: 10px;
        background: rgba(255,255,255,0.5);
        /* 应用模糊效果 */
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 16px;
        transition: all 0.3s;
        .itemInner{
          display: flex;
          align-items: center;
          justify-content: center;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
      }
    }
  }

  .controls {
    margin-top: 20px;
  }
}
</style>
